<!-- 公告列表 -->
<template>
  <div class="notice-page">
    <div class="pck-notice-title">
      <span>最新公告</span>
    </div>
    <div class="pck-Exam-content">
      <div class="pck-notice">
        <div class="pck-notice-item" :class="tabIndex == item.value ? 'pck-notice-active' : ''" v-for="(item,index) in tablist" @click="tabClick(item)">{{ item.lable }}</div>
      </div>
      <div class="notice-box">
        <el-table :data="tableData" border :header-cell-style="{ background: '#F5F6F7', color: '#333333' }" style="width: 100%">
          <el-table-column fixed label="序号" width="60" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="公告名称" align="center">
            <template slot-scope="scope">
              <span class="notice-title" :class="scope.row.readStatus == null ? 'unRead' : ''" @click="handleClick(scope.row)">
                {{scope.row.notice_name}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="发布时间" align="center">
            <template slot-scope="scope">
              {{scope.row.update_time}}
            </template>
          </el-table-column>
        </el-table>

        <div class="page" v-if="total > 0">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                         layout="total, prev, pager, next, sizes, jumper" :total="total" background>
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNoticelist } from "@/api";
import watermark from "@/utils/watermark";

export default {
  name: "notice",
  data() {
    return {
      tablist: [
        { lable: '全部', value: null },
        { lable: '已读', value: 1 },
        { lable: '未读', value: 0 },
      ],
      tabIndex: null,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 1,
    }
  },
  mounted() {
    this.getNoticelist()
    watermark.set('')
  },
  methods: {
    // 获取公告列表
    getNoticelist() {
      let params = {
        is_read: this.tabIndex,
        page: this.pageNum,
        list_rows: this.pageSize
      }
      getNoticelist(params).then(res => {
        if (res.code == 1) {
          this.tableData = res.data.data || []
          this.total = res.data.total || 0
        }
      })
    },
    tabClick(e) {
      this.tabIndex = e.value
      this.getNoticelist()
    },
    // 跳转详情
    handleClick(e) {
      this.$router.push({
        path: '/announcementDetails',
        query: {
          notice_id: e.notice_id
        }
      })
    },

    //  分页
    handleSizeChange(e) {
      this.pageSize = e;
      this.getNoticelist();
    },
    //  分页
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getNoticelist();
    },
  }
}
</script>

<style lang="scss" scoped>
.notice-page {
  width: 100%;
  height: 100%;
  .notice-title {
    cursor: pointer;
    &:active { opacity: 0.5 }
  }
  .unRead {
    position: relative;
    color: #0158FD;
    &:after {
      content: '';
      position: absolute;
      top: 5px;
      left: -15px;
      width: 8px;
      height: 8px; /* 边框高度 */
      border-radius: 50%;
      background: #E11300; /* 边框颜色 */
    }
  }
}
</style>
